<template>
  <view class="container">
    <view class="form-container">
      <view class="form-item">
        <label>姓名</label>
        <input v-model="formData.name" placeholder="请输入姓名" />
      </view>
      <view class="form-item">
        <label>密码</label>
        <input v-model="formData.password" placeholder="请输入密码" type="password" />
      </view>
      <view class="form-item">
        <label>昵称</label>
        <input v-model="formData.nickname" placeholder="请输入昵称" />
      </view>
      <view class="form-item">
        <label>手机号</label>
        <input v-model="formData.phone" placeholder="请输入手机号" type="number" />
      </view>
      <view class="form-item">
        <label>邮箱</label>
        <input v-model="formData.email" placeholder="请输入邮箱" />
      </view>
      <view v-if="isSuccess" class="success-tip">
        <view class="success-icon"></view>
        <text>添加成功</text>
      </view>
      <button class="add-button" @click="submit()">添加</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        password: '',
        nickname: '',
        phone: '',
        email: ''
      },
      isSuccess: false
    };
  },
  methods: {
      submit() {
          console.log("----------执行添加操作----------");
          uniCloud.callFunction({
              name: 'addUser', //云函数名称
              data: this.formData,
              success: (e) => {
                  console.log(e.result); //打印返回数据
                  uni.showToast({
                      title: '添加成功',
                      duration: 2000
                  });
              }
          })
      }
  }
};
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f4f4f4;
}

.form-container {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
}

.form-item {
  margin-bottom: 20rpx;
}

.form-item label {
  display: block;
  margin-bottom: 5rpx;
  font-weight: bold;
}

.form-item input {
  width: 100%;
  padding: 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
}

.success-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  color: #333;
}

.success-icon {
  width: 40rpx;
  height: 40rpx;
  background-color: #333;
  border-radius: 50%;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-icon::after {
  content: "";
  width: 20rpx;
  height: 20rpx;
  border: 3rpx solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.add-button {
  width: 100%;
  padding: 15rpx;
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  margin-top: 20rpx;
  font-size: 16px;
}
</style>